<template>
    <!-- 发布文章卡片区 -->
  <el-card class="box-card">
    <!-- 命名插槽，头部内容 -->
    <div slot="header" class="clearfix">
      <span>粉丝统计</span>
    </div>
    <!-- 匿名插槽，内容主体 -->
    <div class="text item">
      <div id="main" style="width:600px;height:400px"></div>
    </div>
  </el-card>
</template>

<script>

// 引入echarts
import echarts from 'echarts'

export default {
  name: 'Fans',
  mounted () { // 生命周期方法mounted，是html模板内容已经被组件实例编译并渲染完毕后
    this.paintPic()
  },
  methods: {
    // 根据数据绘制echarts图表
    paintPic () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['老张', '小孙', '小袁', '小原', '小邵', '小郑']
        },
        yAxis: {},
        series: [{
          name: '粉丝量',
          type: 'bar',
          data: [42, 18, 17, 19, 30, 24]
        }]
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
